<!DOCTYPE html>
<html lang="en">
<head>
    <title>老版本VUE示例</title>
</head>
<body>
    <div id="app">
        <ul>
            <li v-for="i in arr">{{i}}</li>
        </ul>
        <hr>
        <ul>
            <li v-for="(i,index) in arr">{{index}}:{{i}}</li>
        </ul>
        <hr>
        <ul>
            <li v-for="(i,idx) in people">{{idx}},{{i}}</li>
        </ul>
        <hr>
        <ul>
            <li v-for="(i,index) in people">name={{i.name}},age={{i.age}}</li>
        </ul>

        <button @click="add">增加（js函数push）</button>
        <button @click="remove">删除（js函数shift）</button>

        
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app123 = new Vue({
            el:"#app",
            data:{
                arr:[
                    "haha",
                    "adw",
                    "adwadw",
                ],
                people:[
                    {name:"zhangsan",age:12},
                    {name:"lisi",age:16}
                ]
            },
            methods:{
                add:function(){
                    this.arr.push("new")
                },
                remove:function(){
                    this.arr.shift();
                }
                
            }
        })
    </script>
</body>
</html>